<template>
	<view class="missrivertop2">
		<view>
			<view class="" style="padding: 110rpx 20rpx 20rpx 20rpx;height: 69rpx;">
				<!-- <image :src="getImgUrl('/img/missimg/xiangzuojiantou.svg')" style="width: 56rpx;height: 30rpx;" @tap="Black"></image> -->
			<uni-icons custom-prefix="back" type="back" size="30" color="#FFFFFF" @click="Black"></uni-icons>
			</view>
			<view style="margin-top: 10%;">
				<image class="topimage" :src="oneimg" mode=""></image>
			</view>
			<swiper class="swiper" circular :interval="interval" :duration="duration" :current="current" @change="swiperChange">
				<swiper-item v-for="(item,index) in lampList" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item.icon" :mode="item.text"></image>
						<image :src="xzimg" class="xzimg" @click="ToLeft(index)"></image>
						<image :src="xyimg" class="xyimg" @click="ToRight(index)"></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view style="height: 260rpx;">
			<view class="misssubmit" @click="misspass">
			写下我的思念
		</view>
		</view>

	</view>
</template>

<script>
	import {imgBaseUrl} from '../../../../utils/baseUrl.js'
	export default {
		data() {
			return {
				current: 0,
				interval: 2000,
				duration: 500,
				num:'0',
				xzimg: imgBaseUrl +  '/img/missimg/xiangzuojiantou.svg',
				xyimg:  imgBaseUrl + '/img/missimg/xiangyoujiantou.svg',
				oneimg: imgBaseUrl + '/img/missimg/onedeng.png',
				lampList: [{
					dictItem:'0',
					text: "荷花灯",
					icon:imgBaseUrl +  "/img/missimg/deng1.png"
				}, {
					dictItem:'1',
					text: "荷花灯",
					icon: imgBaseUrl + "/img/missimg/deng2.png"
				}, {
					dictItem:'2',
					text: "荷花灯",
					icon: imgBaseUrl + "/img/missimg/deng3.png"
				}],
				
			};
		},
		methods: {
			swiperChange(event) {
				this.current = event.detail.current; // 更新当前轮播项索引
			},
			//向左
			ToLeft(id) {
				if (this.current > 0) {
					this.current--;
					this.num = this.current
					console.log(this.current,'id')
				} else {
					this.current = this.lampList.length - 1;
					this.num = this.current
				}
			},
			//向右
			ToRight(id) {
				if (this.current < this.lampList.length - 1) {
					this.current++;
					this.num = this.current
				} else {
					this.current = 0;
					this.num = this.current
				}
			},
			misspass() {
				setTimeout(()=>{
					this.$eventBus.$emit('ids', this.num)
				},500)
				
				this.$emit('misspass')
			},
			Black(){
				this.$emit('pass')
			},
			// 图片渲染
			getImgUrl(image){
				return imgBaseUrl+image;
			},
		},
	}
</script>

<style lang="less" scoped>
	.missrivertop2 {
			display: flex;
			flex-direction: column;
		.topimage {
			width: 336rpx;
			height: 56rpx;
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
		}

		.misssubmit {
			text-align: center;
			width: 356rpx;
			height: 100rpx;
			color: #60371A;
			font-family: PingFang SC-Bold, PingFang SC;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 100rpx;
			background: linear-gradient(180deg, #FEF1DF 0%, #FBE5C4 100%);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			opacity: 1;
			margin:22rpx auto;
			// margin-top: 120rpx;/
		}

		.swiper {
			height: 55vh;
			margin-top: 30%;

			image {
				height: 865rpx;
				width: 100%;
				position: relative;
			}

			.xzimg {
				width: 70rpx;
				height: 865rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.xyimg {
				width: 70rpx;
				height: 865rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
</style>
